<template>
  <div>
    <input ref="inp" v-if="show" type="text" placeholder="请输入内容" />
    <button @click="del" v-else>点击搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    del() {
      // 修改后dom更新是异步的，所有无法立即获得
      this.show = true;
      // 获取到inp 后聚焦
      this.$nextTick(() => {
        this.$refs.inp.focus();
      });
    },
  },
};
</script>

<style scoped>
</style>